<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东分类页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            height: 100%;
        }
        ul{
            list-style: none;
        }

        body{
            display: flex;
            flex-direction: column;
        }
        header{
            height: 45px;
            background: gray;
        }
        header ul{
            display: flex;
            overflow: auto;
            color: white;
        }
        header ul li{
            /*不允许被挤压*/
            flex-shrink: 0;
            line-height: 45px;
            padding: 0 10px;
        }
        header ul li:hover{
            background: white;
            color: #e96062;
        }

        section{
            flex: 1;
            display: flex;
            overflow: auto
        }
        section ul{
            width: 85px;
            overflow: auto
        }
        section ul li{
            height: 45px;
            line-height: 45px;
            text-align: center;
            font-size: 14px;
            background: #f8f8f8;
        }
        section ul li:hover{
            background: white;
            color: #e96062;
        }
        section>div{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            overflow: auto;
        }
        .list>div{
            width: 33.3%;
            height: 101px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .list>div>img{
            width: 60px;
            height: 50px;
        }

        footer{
            height: 50px;
            background: gray;
        }

        ::-webkit-scrollbar{
            display: none;
        }
    </style>
</head>
<body>
    <header>
        <ul>
            <li>热门推荐</li>
            <li>猜你喜欢</li>
            <li>附近零食</li>
            <li>看电影</li>
            <li>酒店住宿</li>
            <li>旅游</li>
            <li>广场</li>
            <li>精品优选</li>
            <li>骑行</li>
            <li>热门推荐</li>
            <li>猜你喜欢</li>
            <li>附近零食</li>
            <li>看电影</li>
            <li>酒店住宿</li>
            <li>旅游</li>
            <li>广场</li>
            <li>精品优选</li>
            <li>骑行</li>
        </ul>
    </header>
    <section>
        <ul>
            <li>食品</li>
            <li>电器</li>
            <li>洗护</li>
            <li>女装</li>
            <li>手机</li>
            <li>健康</li>
            <li>男装</li>
            <li>美妆</li>
            <li>电脑</li>
            <li>运动</li>
            <li>内衣</li>
            <li>母婴</li>
            <li>数码</li>
            <li>百货</li>
            <li>鞋包</li>
            <li>办公</li>
            <li>家装</li>
            <li>饰品</li>
            <li>车品</li>
            <li>图书</li>
            <li>生鲜</li>
            <li>家纺</li>
        </ul>
        <div class="list">
            <div>
                <img src="img/dils.png" alt="">
                <p>低卡零食</p>
            </div>
            <div>
                <img src="img/jgch.jpg" alt="">
                <p>坚果炒货</p>
            </div>
            <div>
                <img src="img/hwls.jpg" alt="">
                <p>海味零食</p>
            </div>
            <div>
                <img src="img/ltdg.jpg" alt="">
                <p>辣条豆干</p>
            </div>
            <div>
                <img src="img/jkls.png" alt="">
                <p>进口零食</p>
            </div>
            <div>
                <img src="img/lsdlb.png" alt="">
                <p>零食大礼包</p>
            </div>
            <div>
                <img src="img/bggd.png" alt="">
                <p>饼干糕点</p>
            </div>
            <div>
                <img src="img/qkl.jpg" alt="">
                <p>巧克力</p>
            </div>
            <div>
                <img src="img/gdbd.png" alt="">
                <p>果冻布丁</p>
            </div>
            <div>
                <img src="img/mjgg.jpg" alt="">
                <p>蜜饯果干</p>
            </div>
            <div>
                <img src="img/spph.png" alt="">
                <p>薯片膨化</p>
            </div>
            <div>
                <img src="img/tg.jpg" alt="">
                <p>糖果</p>
            </div>
            <div>
                <img src="img/dmy.jpg" alt="">
                <p>稻米油</p>
            </div>
            <div>
                <img src="img/dmy.jpg" alt="">
                <p>五谷杂粮</p>
            </div>
            <div>
                <img src="img/mf.png" alt="">
                <p>面粉</p>
            </div>
            <div>
                <img src="img/guamian.jpg" alt="">
                <p>挂面</p>
            </div>
            <div>
                <img src="img/kstwl.png" alt="">
                <p>快手调味料</p>
            </div>
            <div>
                <img src="img/cy.jpg" alt="">
                <p>茶油</p>
            </div>
            <div>
                <img src="img/xsct.png" alt="">
                <p>西式餐调</p>
            </div>
            <div>
                <img src="img/hpyl.jpg" alt="">
                <p>烘培原料</p>
            </div>
            <div>
                <img src="img/zcxc.png" alt="">
                <p>佐餐小菜</p>
            </div>
        </div>
    </section>
    <footer></footer>
</body>
</html>